<template>
  <button
    :type="props.type"
    class="gap-col-10"
    :class="{
      'primary-gradient': props.isGradient,
      'bg-primary': !props.isGradient,
      'promotion-gradient': props.isPromotion,
      [disabledClass]: props.disabled,
    }"
    @click="() => emit('click')"
    :disabled="props.disabled"
  >
    <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140">
      {{ intl ? $t(props.label) : props.label }}
    </div>
  </button>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
  label: { type: String, required: true },
  type: { type: String, default: 'button' },
  isGradient: { type: Boolean, default: true },
  isPromotion: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  intl: { type: Boolean, default: false },
})

const disabledClass = computed(() =>
  props.isPromotion
    ? 'promotion-gradient-disable'
    : props.isGradient
    ? 'primary-gradient-disable'
    : 'primary-btn-disable',
)

const emit = defineEmits(['click'])
</script>
<style scoped lang="scss">
button {
  display: flex;
  height: 2rem;
  width: 100%;
  padding: 0rem 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;

  border-radius: 1.25rem;
}
</style>
